<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="1000px"
  >
    <template #title> 新建计划 </template>
    <div>
      <a-table
        :data="consigneeData"
        :scroll="scroll"
        :pagination="false"
        row-key="id"
        :row-selection="rowSelection"
        v-model:selectedKeys="selectedKeys"
        @select="onSelect"
        v-bind="args"
      >
        <template #columns>
          <a-table-column align="center" :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            title="姓名"
            dataIndex="name"
            align="center"
            :width="100"
          >
          </a-table-column>

          <a-table-column
            title="联系电话"
            :width="100"
            dataIndex="phone"
            align="center"
          >
          </a-table-column>
          <a-table-column
            title="职务"
            :width="100"
            dataIndex="job"
            align="center"
          >
          </a-table-column>
          <a-table-column
            title="部门"
            :width="100"
            dataIndex="department"
            align="center"
          >
          </a-table-column>
          <a-table-column
            title="办公地点"
            :width="200"
            dataIndex="address"
            align="center"
          >
          </a-table-column>
          <a-table-column
            title="决策作用"
            :width="200"
            dataIndex="decision"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="150"
            title="是否为首要联系人"
            dataIndex="primaryContact"
            align="center"
            :sortable="{
              sortDirections: ['descend'],
            }"
          >
            <template #cell="{ record }">
              {{ record.primaryContact === 0 ? '否' : '是' }}
            </template>
          </a-table-column>
          <a-table-column
            :width="150"
            title="是否为决策关键人"
            dataIndex="primaryDecision"
            align="center"
            :sortable="{
              sortDirections: ['descend'],
            }"
          >
            <template #cell="{ record }">
              {{ record.primaryDecision === 0 ? '否' : '是' }}
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';

  const props = withDefaults(
    defineProps<{
      id: number;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const args = {
    bordered: {
      headerCell: true,
    },
    stripe: true,
  };
  const rowSelection = reactive({
    type: 'radio',
  });
  const selectedKeys = ref([]);
  const SelectDate = ref([]);
  const onSelect = (e: number, keys: number, val: any) => {
    SelectDate.value[0] = val;
  };

  const emit = defineEmits(['update:visible', 'selectConsignee']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const consigneeData = ref([]);
  const getData = async () => {
    const res = await GetClientDetailTabs({ id: props.id, typeId: 10 });
    consigneeData.value = res;
  };
  getData();

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    emit('selectConsignee', SelectDate.value[0]);
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
